<template>
  <SlideMenu></SlideMenu>
</template>

<script lang="tsx" setup>
import type { PropType } from 'vue'
import SubMenu from './SubMenu.vue'
import type { FileMenu } from './types'

const props = defineProps({
  fileMenu: {
    type: Array as PropType<FileMenu>,
    default: () => []
  }
})
const emit = defineEmits(['selectHandleItem'])
const isCollapse = ref(false)
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
const selectHandleItem = (item: any) => {
  emit('selectHandleItem', item)
}
const SlideMenu = () => {
  return (
    <>
      <el-radio-group v-model={isCollapse.value} style="margin-bottom:20px">
        <el-radio-button label={false}>展开</el-radio-button>
        <el-radio-button label={true}>折叠</el-radio-button>
      </el-radio-group>
      <el-menu collapse={isCollapse.value}>
        <SubMenu
          fileMenu={props.fileMenu}
          onSelectHandleItem={(item) => {
            selectHandleItem(item)
          }}
        ></SubMenu>
      </el-menu>
    </>
  )
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
